/* Font definitions */
@font-face {
	font-family: monaspace-neon;
	src: url('/fonts/Monaspace Neon Var.woff2') format('woff2'),
	url('/fonts/Monaspace Neon Var.woff') format('woff');
}

@font-face {
	font-family: monaspace-neon-nf;
	src: url('/fonts/MonaspaceNeonNF-Regular.woff2') format('woff2'),
	url('/fonts/MonaspaceNeonNF-Regular.woff') format('woff');
}

@font-face {
	font-family: monaspace-krypton;
	src: url('/fonts/Monaspace Krypton Var.woff2') format('woff2'),
	url('/fonts/Monaspace Krypton Var.woff') format('woff');
}

@font-face {
	font-family: monaspace-krypton-nf;
	src: url('/fonts/MonaspaceKryptonNF-Regular.woff2') format('woff2'),
	url('/fonts/MonaspaceKryptonNF-Regular.woff') format('woff');
}

html {
	/* Dark background - inactive phosphor */
	/* --bg: #0b0500; */
	--bg: #170501;

	/* Text */
	--text-bright: #ffad14;
	--text-bright-shadow: #ffad14a5;
	--text: #f0730d;
	--text-shadow: #f0730d65;
	--text-dark: #a7390a;
	--text-dark-shadow: #a7390a45;
	--text-vdark: #702309;
	--text-vdark-shadow: #70230945;

	/* CRT filter values */
	--crt-px: 2px;
	--grid-bg: #17050185;

	/* Styles */
}

::selection {
	background-color: var(--text);
	color: var(--bg);
}

body {
	font-family: monaspace-neon;
	background-color: var(--bg);
	color: var(--text);
	font-weight: 600;
	text-shadow: 0 0 10px var(--text-shadow);

	/* Credit to https://www.reddit.com/r/webdev/comments/1s8vqyc/crt_text_effects_pure_csssvg/ for the scanline effect */
	&::before, &::after {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		mask-image: linear-gradient(to right,transparent,black var(--padding),black calc(100% - var(--padding)),transparent),linear-gradient(to bottom,transparent,black var(--padding),black calc(100% - var(--padding)),transparent);
		mask-composite: intersect;
		-webkit-mask-image: linear-gradient(to right,transparent,black var(--padding),black calc(100% - var(--padding)),transparent),linear-gradient(to bottom,transparent,black var(--padding),black calc(100% - var(--padding)),transparent);
		-webkit-mask-composite: source-in
	}

	&::before {
		z-index: 2;
		opacity: 0.1;
		background-image: repeating-linear-gradient(to right,transparent 0px,transparent calc(var(--crt-px) - 1px),var(--grid-bg) calc(var(--crt-px) - 1px),var(--grid-bg) var(--crt-px));
		background-size: var(--crt-px) 100%;
	}

	&::after {
		z-index: 3;
		opacity: 0.7;
		background-image: repeating-linear-gradient(to bottom,transparent 0px,transparent calc(var(--crt-px) - 1px),var(--grid-bg) calc(var(--crt-px) - 1px),var(--grid-bg) var(--crt-px));
		background-size: 100% var(--crt-px);
	}
}

hr {
	border: 1px solid var(--text);
}

a,b {
	font-weight: 800;
	color: var(--text-bright);
	text-shadow: 0 0 10px var(--text-bright-shadow);
}

code {
	font-family: monaspace-krypton;
	/* color: var(--text-dark);
	text-shadow: 0 0 10px var(--text-dark-shadow); */
	padding: 0.1em;
	padding-inline: 0.5em;
	border: 2px solid var(--text-vdark);
	box-shadow: 0 0 10px 1px var(--text-vdark-shadow),
	inset 0 0 10px 1px var(--text-vdark-shadow);
	display: block;

	&.inline {display: inline;}
}

.container {
	border: 2px solid var(--text-dark);
	box-shadow: 0 0 10px 1px var(--text-dark-shadow),
	inset 0 0 10px 1px var(--text-dark-shadow);
}

.glow {
	box-shadow: 0 0 10px 1px var(--text-shadow);
}

.glow-inner {
	box-shadow: inset 0 0 10px 1px var(--text-shadow);
}